import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button } from 'antd';
import EditorForm from '@/components/EditorForm';
import FormCondition from '@/components/FormCondition';
import FlxButton from '@/components/FlxButton'
import { Row, Col, Card, Switch, Statistic, Tooltip, Space } from 'antd'
const PlanForm = (props) => {
    const { dispatch, reload } = props;
    const [data, setData] = useState({})
    const [content, setContent] = useState(''); // 输入的富文本内容
    const [form] = Form.useForm();
    // 新增修改 传id修改 不传id新增
    const EditContent = useRef(null);
    const [contentStatus, setContentStatus] = useState(false)
    const { id } = data
    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            dispatch({
                type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
                payload: {
                    ...data,
                    ...values,
                    webPageContent: content
                },
                callback: () => {
                    reload && reload()
                }
            })
        });
    };
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { webPageTitle, webPageContent, id } = e
                setContentStatus(() => {
                    setContent(webPageContent)
                    setData({
                        webPageTitle, webPageContent, id
                    })
                    return true
                })

            }
        })
    }

    useEffect(() => {
        fetchData()
    }, [])
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };

    const formItems = [
        {
            label: '页面标题',
            name: 'webPageTitle',
            placeholder: "推广员招募",
            rules: [{ required: false }],
        },

        {
            type: 'noForm',
            visible: contentStatus,
            formItem: (
                <Row gutter={[12, 12]}>
                    <Col span={24}>
                        {' '}
                        <div style={{}} className="">
                            <span style={{ color: '#ff4d4f' }}></span>详情描述：
                            <span style={{ color: '#ffa114' }}>* 为了降低被微信警告或者禁用的风险，建议使用模板文案或长图:</span>
                        </div>
                    </Col>
                    <Col span={24} style={{ paddingLeft: 4 }}>
                        <EditorForm
                            ref={EditContent}
                            content={content}
                            editCallback={(val) => setContent(val)}
                        ></EditorForm>
                    </Col>
                </Row >
            ),
        },
        // {
        //     label: '申请信息',
        //     rules: [{ required: false }],
        //     name: 'applyInformationFlag',
        //     placeholder: "推广员申请信息",
        //     type: 'radio',
        //     select: {
        //         0: '不需要',
        //         1: '需要'
        //     }
        // },
    ];



    return (
        <Row >
            <Col span={12}>
                <div style={{ paddingTop: 12 }}>
                    <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={data}></FormCondition>
                </div>
            </Col>
            <FlxButton onOk={fetchRoleEdit}></FlxButton>
        </Row>


    );
};

export default connect(({ institution, loading }) => ({
    loading: loading.models.institution,
}))(PlanForm);
